<script setup></script>

<template>
  <div class="container mx-auto p-8">
    <h1 class="mb-6 text-2xl font-bold">Spinner Component</h1>

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Spinner Sizes</h3>
        <div class="flex flex-row items-center space-x-8 py-4">
          <div class="flex flex-col items-center space-y-2">
            <Spinner size="tiny" />
            <span class="text-sm">Tiny</span>
          </div>
          <div class="flex flex-col items-center space-y-2">
            <Spinner size="extra-small" />
            <span class="text-sm">Extra Small</span>
          </div>
          <div class="flex flex-col items-center space-y-2">
            <Spinner size="small" />
            <span class="text-sm">Small</span>
          </div>
          <div class="flex flex-col items-center space-y-2">
            <Spinner size="medium" />
            <span class="text-sm">Medium</span>
          </div>
        </div>
        <div class="flex flex-row items-center space-x-8 py-4">
          <div class="flex flex-col items-center space-y-2">
            <Spinner size="large" />
            <span class="text-sm">Large</span>
          </div>
          <div class="flex flex-col items-center space-y-2">
            <Spinner size="extra-large" />
            <span class="text-sm">Extra Large</span>
          </div>
          <div class="flex flex-col items-center space-y-2">
            <Spinner size="huge" />
            <span class="text-sm">Huge</span>
          </div>
        </div>
      </div>

      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Spinner Appearances</h3>
        <div class="flex flex-col space-y-8">
          <div class="flex flex-col items-center space-y-2">
            <Spinner appearance="primary" size="large" />
            <span class="text-sm">Primary (Default)</span>
          </div>
          <div
            class="flex flex-col items-center space-y-2 rounded-md bg-gray-800 p-4"
          >
            <Spinner appearance="inverted" size="large" />
            <span class="text-sm text-white">
              Inverted (for dark backgrounds)
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
